import { defineComponent, ref } from "vue";
import VChart from "vue-echarts";
import { use } from "echarts/core";
import { BarChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
} from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";
import "./ForceDeployment.css";

use([BarChart, TitleComponent, TooltipComponent, GridComponent, LegendComponent, CanvasRenderer]);

export default defineComponent({
  name: "ForceDeployment",
  components: {
    VChart,
  },
  setup() {
    const chartOption = ref({
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
        backgroundColor: "rgba(0, 0, 0, 0.8)",
        borderColor: "#00d4ff",
        borderWidth: 1,
        textStyle: {
          color: "#fff",
        },
      },
      legend: {
        data: ["现役", "预备役", "装甲部队", "空中力量"],
        textStyle: {
          color: "#fff",
        },
        top: 10,
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        top: "15%",
        containLabel: true,
      },
      xAxis: {
        type: "category",
        data: ["北方战区", "东部战区", "南部战区", "西部战区", "中部战区"],
        axisLine: {
          lineStyle: {
            color: "rgba(255, 255, 255, 0.3)",
          },
        },
        axisLabel: {
          color: "#fff",
          fontSize: 12,
        },
      },
      yAxis: {
        type: "value",
        name: "兵力(千人)",
        nameTextStyle: {
          color: "#fff",
        },
        axisLine: {
          lineStyle: {
            color: "rgba(255, 255, 255, 0.3)",
          },
        },
        axisLabel: {
          color: "#fff",
          fontSize: 12,
        },
        splitLine: {
          lineStyle: {
            color: "rgba(255, 255, 255, 0.1)",
          },
        },
      },
      series: [
        {
          name: "现役",
          type: "bar",
          data: [85, 92, 88, 76, 81],
          itemStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: "#00d4ff" },
                { offset: 1, color: "#0066ff" },
              ],
            },
          },
        },
        {
          name: "预备役",
          type: "bar",
          data: [45, 52, 48, 42, 46],
          itemStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: "#00ff88" },
                { offset: 1, color: "#00cc66" },
              ],
            },
          },
        },
        {
          name: "装甲部队",
          type: "bar",
          data: [32, 38, 35, 28, 31],
          itemStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: "#ffd700" },
                { offset: 1, color: "#ff8c00" },
              ],
            },
          },
        },
        {
          name: "空中力量",
          type: "bar",
          data: [18, 22, 20, 15, 17],
          itemStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: "#ff4444" },
                { offset: 1, color: "#cc0000" },
              ],
            },
          },
        },
      ],
    });

    return () => (
      <div class="force-deployment">
        <div class="force-deployment__header">
          <h3 class="force-deployment__title">兵力部署统计</h3>
        </div>
        <div class="force-deployment__chart">
          <VChart option={chartOption.value} autoresize style="height: 100%; width: 100%;" />
        </div>
      </div>
    );
  },
});
